<template>
	<view>
		<view class="unicorn-body">
			<view class="my-unit">
				<view class="unicorn-card" v-for="(item,index) in msg" :key="item.id">
					<view class="unit-head">
						<view class="main-title">火情事件：<span class="main-title-value">{{item.event_name}}</span></view>
						<view>发生时间：{{item.startTime}} </view>
					</view>
					<view class="unit-body">
						<text>检测设备：<text>{{item.cameraName}}</text></text>
						<text>火点距离：<text>{{item.distance}} 米</text></text>
						<text>着火面积：<text>{{item.fireArea}} 平方</text></text>
						<text>着火原因：<text>{{item.fireReason}}</text></text>
						<text>经度：<text>{{item.latitude}}</text></text>
						<text>纬度：<text>{{item.longitude}}</text></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				msg: []
			};
		},

		methods: {


		},
		//当页面加载时
		onLoad() {
			var cache = uni.getStorageSync('USER_INFO')
			console.log(cache)
			if (cache) {
				console.log("已经存在缓存")
				this.decide = true
			} else {
				console.log("没有拿到缓存,需要登录")
				uni.reLaunch({
					url: '../self/self'
				})
			}
			//发送请求
			uni.request({
				url: this.$url + '/mobile/fireReport',
				method: 'POST',
				success: (res) => {
					this.msg = res.data.data
					console.log("火情信息", this.msg)
				}
			})
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #F2F2F2;
		font-size: 28upx;
		color: #333333;
		font-family: Helvetica Neue, Helvetica, sans-serif;
	}

	.unicorn-page {
		margin-top: -4rpx;
	}

	.unicorn-body {
		padding: 0 20rpx;
	}

	.unicorn-card {
		border-radius: 10px;
		margin-bottom: 8px;
		background-color: #ffffff;
	}

	.my-unit {
		margin: 20upx 0;
		font-size: 28upx;
		transform: all 1s;

		.unit-head {
			z-index: 5;
			padding: 20upx;
			height: 110rpx;
			box-sizing: border-box;
			flex-wrap: wrap;

			text {
				width: 50%;
				font-size: 28upx;
				line-height: 55upx;
			}

			view {
				padding-bottom: 10rpx;
			}

			.main-title {}

			.main-title-value {
				font-size: 30rpx;
				font-weight: 700;
			}
		}

		.unit-body {
			z-index: 5;
			padding: 20upx;
			display: flex;
			flex-wrap: wrap;

			text {
				width: 50%;
				font-size: 28rpx;
				line-height: 55upx;
				color: #999999;
			}
		}

	}
</style>
